import React, { Component } from "react";
import CommentInput from "./CommentInput";
import CommentList from "./CommentList";
// import Header from "./component/Header";
// import Clock from "./component/Clock";
// import AutoFocusInput from "./component/AutofocusInput";
// import Card from "./component/Card";
// import DangerouslySetInnerHTML from "./component/DangerouslySetInnerHTML";

class CommentApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      comments: []
    };
  }
  componentWillMount() {
    this._loadComments();
  }
  _loadComments() {
    let comments = localStorage.getItem("comments");
    if (comments) {
      comments = JSON.parse(comments);
      this.setState({ comments });
    }
  }
  handleSubmitComment(comment) {
    if (!comment) return;
    if (!comment.username) return alert("请输入用户名");
    if (!comment.content) return alert("请输入评论内容");
    let comments = [...this.state.comments, comment];
    this.setState({
      comments
    });
    localStorage.setItem("comments", JSON.stringify(comments));
  }
  handleDeleteComment = index => {
    let comments = this.state.comments;
    comments.splice(index, 1);
    this.setState({ comments });
    localStorage.setItem("comments", JSON.stringify(comments));
  };
  render() {
    return (
      <div className="wrapper">
        {/* <Header /> */}
        <CommentInput onSubmit={this.handleSubmitComment.bind(this)} />
        <CommentList
          comments={this.state.comments}
          onDeleteComment={this.handleDeleteComment}
        />
        {/* <Clock /> */}
        {/* <AutoFocusInput /> */}
        {/* <Card>
          <div>
            <div>开源、免费、专业、简单</div>
            订阅：
            <input />
            <h2>React.js 小书</h2>
          </div>
          <div>2222</div>
        </Card> */}
        {/* <DangerouslySetInnerHTML /> */}
      </div>
    );
  }
}

export default CommentApp;
